<!DOCTYPE HTML>
<script src="../../resources/js-test.js"></script>
<style>
    #controlsimple { color: hsl(120,75%,50%); }
    #simple        { color: hsl(calc(120),calc(75%),calc(50%)); }

    #controlalpha { color: hsla(120,75%,50%,0.7); }
    #alpha        { color: hsla(calc(120),calc(75%),calc(50%), calc(0.7)); }
</style>
<div id="test-container">
    <hr/>
    <div id="controlsimple">These two sentences should be the same color (simple)</div>
    <div id="simple">These two sentences should be the same color (simple)</div>
    <hr/>
    <div id="controlalpha">These two sentences should be the same color (alpha)</div>
    <div id="alpha">These two sentences should be the same color (alpha)</div>
</div>
<script>
    description("Tests that CSS3 calc() can be used with the hsl() and hsla() functions");
    
    tests = ["simple", "alpha"];

    for (i = 0; i < tests.length; i++) {
        var test = tests[i];
        shouldBeEqualToString('getComputedStyle(document.getElementById("' + test + '"), null).color', getComputedStyle(document.getElementById("control" + test), null).color);
    }
    
    if (window.testRunner)
        document.body.removeChild(document.getElementById("test-container"));   
</script>

